<template>
  <el-dialog :title="info.isadd ? '添加角色' : '编辑角色'" :visible.sync="info.isshow" center :before-close="cancel">
    <el-form :model="roleinfo" :rules="rules" ref="dialog">
      <el-form-item label="角色名称" label-width="120px" prop="rolename">
        <el-input v-model="roleinfo.rolename"></el-input>
      </el-form-item>
      <el-form-item label="角色权限" label-width="120px">
        <!-- 
          data:绑定的数据,
          show-checkbox:是否显示前面的复选框
          node-key="id" : 唯一标识
          props
          default-expand-all	是否默认展开所有节点
        -->
        <el-tree
          :data="get_menuList"
          show-checkbox
          node-key="id"
          default-expand-all
          :props="{children:'children',label:'title'}"
          ref="tree"
        ></el-tree>
      </el-form-item>

      <el-form-item label="状态" label-width="120px">
        <el-switch
          v-model="roleinfo.status"
          active-color="#13ce66"
          inactive-color="#ccc"
          :active-value="1"
          :inactive-value="2"
        ></el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
/* 
   角色权限：
    我们用的是菜单管理的数据，菜单管理数据在仓库中公共数据，我们就直接通过get_menuList直接获取
    问题
      1.如果从菜单管理进入角色管理能获取到仓库数据，但是直接进入角色管理获取不到
      2.原因：直接从角色管理进入，没有获取菜单管理的数据，
      3.解决：自己需要那就在当前页面获取一次
    问题：
      1.每次进入组件都会重新请求菜单列表的数据，有点冗余
      2.如果有数据，就不请求
*/
import { roleadd, roleinfo, roleedit } from "@/request/api.js";
import { mapActions, mapGetters } from "vuex";
export default {
  props: ["info"],
  data() {
    return {
      // 角色数据
      roleinfo: {
        rolename: "", //角色名称  string
        menus: "", //角色权限 '2,3,4'  不是必须
        status: 1 //状态1正常2禁用  number
      },

      //定义表单规则
      rules: {
        rolename: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    ...mapActions({
      action_roleList: "role/action_roleList", //获取角色数据的方法
      action_menuList: "menu/action_menuList" //获取菜单数据的方法
    }),
    //1.取消  -- 通知父组件，关闭弹框
    cancel() {
      this.$emit("cancel");
      this.reset();
    },
    //3.重置
    reset() {
      //数据重置
      this.roleinfo = {
        rolename: "", //角色名称  string
        menus: "", //角色权限 '2,3,4'  不是必须
        status: 2 //状态1正常2禁用  number
      };
      //规则重置
      this.$refs.dialog.clearValidate();
      
      //选择的重置为空
      this.$refs.tree.setCheckedKeys([]);
    },
    //2.点击确定
    sure() {
      //4.表单验证
      this.$refs.dialog.validate(async val => {
        if (!val) {
          return;
        }

        // tree.getCheckKeys() :获取到选中的选框所组成的数组
        // console.log(this.$refs.tree.getCheckedKeys().join(","));



        if (this.info.isadd) {
          try {
            this.roleinfo.menus = this.$refs.tree.getCheckedKeys().join(",");
            let res = await roleadd(this.roleinfo);
            if (res.code == 200) {
              //成功-- 提示，关闭弹框,获取最新数据
              this.$message.success(res.msg);
              this.action_roleList();
              this.cancel();
            } else {
              this.$message.info(res.msg);
            }
          } catch (err) {
            this.$message.error(err);
          }
        } else {
          try {
            this.roleinfo.menus = this.$refs.tree.getCheckedKeys().join(",");
            let res = await roleedit(this.roleinfo);
            if (res.code == 200) {
              //成功-- 提示，关闭弹框,获取最新数据
              this.$message.success(res.msg);
              this.action_roleList();
              this.cancel();
            } else {
              this.$message.info(res.msg);
            }
          } catch (err) {
            this.$message.error(err);
          }
        }
      });
    },
    //数据回显--点击编辑的时候，显示弹框，请求当前编辑的这一条数据
    async lookup(id) {
      try {
        let res = await roleinfo({ id });
        if (res.code == 200) {
          this.roleinfo = res.list;
          this.roleinfo.id = id; //添加id属性，等会修改的时候用
          //数据回显的时候，需要操作选框
          this.$refs.tree.setCheckedKeys(this.roleinfo.menus.split(","))
        }
      } catch (err) {
        this.$message.error(err);
      }
    }
  },
  computed: {
    ...mapGetters({
      get_menuList: "menu/get_menuList"
    })
  },
  mounted() {
    if (this.get_menuList.length == 0) {
      this.action_menuList();
    }
  }
};
</script>

<style>
</style>